<template>
  <div class="inlistbox">
    <div class="list-tools" v-if="!hideTool">
      <div class="list-tools-form">
        <el-button type="default" size="mini" icon="el-icon-refresh" @click.stop="fetchData"></el-button>
        <slot name="search"></slot>
        <template v-if="!hidSearch">
          <el-input
            v-model="filter.keyword"
            placeholder="关键字"
            size="mini"
            style="width: 280px;"
            v-show="searchOpen"
          >
            <el-select
              v-model="filter.search_type"
              slot="prepend"
              style="width: 100px;"
              placeholder="搜索类型 "
              v-if="stype && stype.length > 0"
            >
              <el-option
                v-for="(item,index) in stype"
                :key="index"
                :value="item.key"
                :label="item.value"
              ></el-option>
            </el-select>
            <el-button icon="el-icon-search" slot="append" @click.stop="search"></el-button>
          </el-input>
          <el-button
            :icon="searchOpen?'el-icon-close':'el-icon-search'"
            @click="searchOpen=!searchOpen"
            size="mini"
            round
          ></el-button>
        </template>
      </div>
    </div>
    <!-- table list -->
    <div :class="cards ? 'cards list-body' : 'list-body'">
      <v-loading v-if="loadingStatus"></v-loading>
      <table ref="tableHead" class="table table-list" :style="loadingStatus ? 'opacity: .1' : ''">
        <colgroup v-if="cols">
          <template v-for="col in cols.split(',')">
            <col v-if="col > 0" :width="col + 'px'" />
            <col v-else />
          </template>
        </colgroup>
        <slot name="head" :filter="filter"></slot>
        <tbody>
          <slot name="item" v-for="item in data.list" :item="item" :data="data"></slot>
          <tr v-if="!data.list || data.list.length < 1">
            <td colspan="100" class="nodata">
              <div class="tc">
                <p class="f14">
                  未找到数据
                  <i class="el-icon-chat-dot-round f24"></i>
                </p>
              </div>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <slot
            name="foot"
            :total="{'ctotal': data.list.length, 'total': data.total, 'selcount': fetchSel().length, 'count': data.count}"
          ></slot>
          <tr v-if="data.total">
            <td colspan="100">
              <div class="pagebar tr">
                <v-pagebar
                  :total="data.total"
                  :totalPage="data.totalpage"
                  :page="filter.page"
                  :pageSize="filter.pagesize"
                  @pageChange="pageChange"
                  @pageSize="pageSizeChang"
                ></v-pagebar>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="dis20"></div>
    <!-- end table list -->
  </div>
</template>

<script>
export default {
  name: "list",
  props: ["api", "params", "stype", "cols", "hideTool", "hidSearch", 'cards'],
  data() {
    return {
      filter: {
        search_type: "",
        keyword: "",
        orderby: "",
        page: 1,
        pagesize: 20
      },
      data: {
        totalpage: 0,
        total: 0,
        count: {},
        list: []
      },
      searchOpen: true,
      loadingStatus: false
    }
  },
  created() {
    if (this.params) {
      this.filter.orderby = this.params.orderby || "";
    }
    this.fetchData();
  },
  watch: {
    api: {
      handler(newValue, oldValue) {
        this.fetchData();
      }
    },
    params: {
      handler(newValue, oldValue) {
        this.fetchData();
      },
      deep: true
    }
  },
  methods: {
    getData() {
      return this.data;
    },
    fetchData(page) {
      let that = this;
      let params = {};
      if (this.params) {
        for (let p in this.params) {
          if (this.params[p]) {
            params[p] = this.params[p];
          }
        }
      }
      for (let p in this.filter) {
        if (this.filter[p]) {
          params[p] = this.filter[p];
        }
      }
      this.loadingStatus = true;
      this.$api.get(this.api, params).then(
        res => {
          if (res.status === 1) {
            this.data = res.data;
            this.data.list.map(function(item, index) {
              that.$set(item, "choose", false);
            });
            // 抛出data完整对象，以便父组件使用
            this.$emit("afterFetchData", this.data);
          }
          this.loadingStatus = false;
        },
        () => {
          this.loadingStatus = false;
        }
      );
    },
    search() {
      this.filter.page = 1;
      this.fetchData();
    },
    setFilter(field, val, reload = true) {
      this.filter[field] = val;
      if (reload) {
        this.fetchData();
      }
    },
    setOrderby (field) {
      let s = "|"
      let f = (this.filter.orderby || s).split(s)
      f[0] = field
      f[1] = (f[1] && f[1] === 'desc') ? 'asc' : 'desc'
      this.setFilter('orderby', f.join(s))
    },
    pageChange(val) {
      this.setFilter("page", val);
    },
    pageSizeChang(val) {
      this.setFilter("page", 1, false);
      this.setFilter("pagesize", val);
    },
    selAll(e) {
      let checked = e.target.checked;
      this.data.list.map(function(item) {
        item.choose = checked;
      });
    },
    fetchSel(field = "id") {
      let res = [];
      let fields = field.split(",");
      this.data.list.forEach(item => {
        if (item.choose) {
          if (fields.length === 1) {
            res.push(item[field]);
          } else {
            let t = {};
            fields.forEach(f => {
              t[f] = item[f] ? item[f] : "";
            });
            res.push(t);
          }
        }
      });
      return res;
    }
  }
};
</script>
<style scoped lang="scss">
.inlistbox {
}
.inlistbox .list-tools {
  padding: 20px 0 20px 0;
}
.inlistbox .list-body {
  min-height: 60px;
  position: relative;
}
</style>